<!--
 * @Author: caihongtai caihongtai
 * @Date: 2025-02-09 14:03:18
 * @LastEditors: caihongtai caihongtai
 * @LastEditTime: 2025-03-29 21:18:12
 * @FilePath: /ai-interview-vue/src/views/Profile/resume/create.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <nav-bar title="上传简历" />
    <div class="upload-container">
        <div class="upload-header">
            <div class="upload-title">请选择上传方式</div>
            <div class="upload-desc">简历建议使用 PDF文件，也支持DOC、DOCX、JPEG、PNG等格式，大小不超过20M</div>
        </div>
        <div class="upload-options">
            <button class="upload-option">
                <input type="file" id="file-upload" class="file-input" accept=".pdf,.doc,.docx,.jpeg,.png,.jpg,.gif"
                    @change="handleFileUpload" />
                <label for="file-upload" class="upload-label">
                    <img src="/images/mine/resume/resume-upload.png" class="icon" />
                    <span class="text">手机文件上传</span>
                </label>

            </button>
            <button class="upload-option" @click="onClickWifi">
                <img src="/images/mine/upload-wifi.png" class="icon" />
                <span class="text">Wi-Fi上传</span>
            </button>
        </div>
    </div>
</template>

<script setup>
    import { uploadFiles } from '@/api/comm'
    import { resumeApi } from '@/api/resume'
    import NavBar from '@/components/NavBar/index.vue'
    import emitter from '@/utils/eventBus'
    import { showToast } from 'vant'
    const router = useRouter()
    const route = useRoute()
    const formState = reactive({
        name: '',
        introduction: '',
    })


    const onClickLeft = () => {
        router.back()
    }
    // 处理文件上传
    const handleFileUpload = (event) => {
        const inputElement = event.target;
        if (inputElement.files && inputElement.files.length > 0) {
            const file = inputElement.files[0];
            // 在这里处理上传的文件，例如发送到服务器
            uploadResume(file)
        }
    };
    // 上传简历
    const uploadResume = async (file) => {
        console.log(route.query, "route.query")
        if (route.query.type === 'create') {
            const res = await uploadFiles(file);
            await resumeApi.editResume({
                cv_name: file.name,
                cv_url: res.data.url,
                default_status: 1 // 默认状态:0=非默认,1=默认
            })
            showToast('保存成功')
            router.back()
        } else {
            // 使用 mitt 事件总线传递文件信息
            emitter.emit('resume-file-upload', file)

            // 导航到首页
            router.replace('/home')
        }
    }
    // 点击Wi-Fi上传
    const onClickWifi = () => {
        resumeApi.getPcToken().then((res) => {
            router.replace({
                path: '/profile/resume/link-wifi',
                state: {
                    params: {
                        token: res.data.token
                    }
                }
            })
        })
    }
</script>
<style lang="scss" scoped>
    .upload-container {
        width: 100%;
        min-height: 100vh;
        margin: 0 auto;
        padding: 16px;
        background-color: #ffffff;
        text-align: center;

        .upload-header {
            margin-bottom: 20px;
            text-align: left;

            .upload-title {
                font-size: 20px;
                font-weight: 600;
                color: rgba(29, 33, 41, 1);
                text-align: left;
                margin-bottom: 10px;
            }

            .upload-desc {
                font-size: 14px;
                font-weight: 400;
                color: rgba(134, 144, 156, 1);
            }
        }

        .upload-options {
            display: flex;
            justify-content: space-around;
            flex-direction: column;

            .upload-option {
                display: flex;
                align-items: center;
                height: 72px;
                border-radius: 16px;
                background: rgba(242, 243, 245, 1);
                cursor: pointer;
                transition: background-color 0.3s ease;
                margin-bottom: 20px;

                &:hover {
                    background-color: #f0f0f0;
                }

                .icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                }

                .text {
                    font-size: 17px;
                    font-weight: 500;
                    color: #333;
                }

                .file-input {
                    display: none;
                }

                .upload-label {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>